<template>
    <div class="container" id="app">
    </div>
</template>

<script>
module.exports = {
    data() {
        return {
            el: "#app",
            data() {
                return {
                    city: "",
                    labList: [],
                    viewList: [],
                    // test: this.city,
                }
            },

        }
    },
    mounted() {
        this.initChart();
    },

    methods: {
        initChart() {
            var option = {
                title: {
                    text: ''
                },
                tooltip: {},
                legend: {
                    data: ['温度']
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [{
                    name: '温度',
                    type: 'line',
                    data: [],
                    markPoint: {
                        data: [
                            {
                                type: 'max',
                                name: '最高温'
                            },
                            {
                                type: 'min',
                                name: '最低温'
                            }
                        ],
                    }
                }]
            };
            var myChart = echarts.init(document.getElementById('app'));
            this.city = '武汉'
            console.log(this.city);


            option.title.text = this.city + "未来5天的温度变化"
            axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.city)
                .then((res) => {
                    
                    // console.log(res.data);
                    //得到未来5天的温度
                    this.labList = res.data.data.forecast;
                    option.xAxis.data = []
                    option.series[0].data = []
                    //遍历未来5天的温度
                    this.labList.forEach(element => {
                        //把非数字内容去掉，只保留数字
                        highnum = element.high.replace(/[^0-9]/ig, "")
                        //获取日期                                                                    
                        mydate = element.date
                        //把日期赋值给xAxis中的data数组
                        option.xAxis.data.push(mydate)
                        //把温度值赋值给series中的data数组
                        option.series[0].data.push(highnum)

                        // console.log(highnum)

                    });
                    //  使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);

                }
                )
        },

    },

}
</script>


<style scoped>
.container {
    border: 1px solid pink;
    width: 50%;
    height: 27%;
    top: 70%;
    left: 19%;
    position: absolute;
    background-color: whitesmoke;
}
</style>